<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 1.插槽的基本使用 <slot></slot>
		 2.插槽的默认值 <slot>button</slot>
		 3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
		 -->
		<div id="app">
			<cpn></cpn>
			<cpn><span>hhh</span></cpn>
			<cpn><i>1111</i></cpn>
			<cpn></cpn>
		</div>
		<template id="cpn">
			<div id="">
				<h2>我是组件</h2>
				<p>我是组件，哈哈哈哈</p>
				<slot><button type="button" class="mui-btn mui-btn-blue">按钮</button></slot>
			</div>
		</template>
		<script src="../js/vue.js"></script>
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				components:{
					cpn:{
						template:'#cpn'
					}
				}
			})
		</script>
	</body>
</html>
